<template>
	<view class="">
		<u-modal closeOnClickOverlay @confirm="confirm" @cancel="cancel" :show="state.show" title="请完善您的信息" showCancelButton cancelText='下次吧'>
			<u--form labelPosition="left" :model="state.form" :rules="state.rules" ref="formRef" labelWidth='4em' labelAlign="right" style="width: 100%;">
				<u-form-item label="姓名" prop="realName" ref="item1">
					<u--input v-model="state.form.realName" placeholder="请输入您的姓名"></u--input>
				</u-form-item>
				<u-form-item label="手机号" prop="mobile" ref="item2">
					<u--input type="number" v-model="state.form.mobile" placeholder="请输入您的手机号">
						<!-- <template #suffix>
							<u-button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</u-button>
						</template> -->
					</u--input>
				</u-form-item>
				<u-form-item label="公司" prop="company" ref="item2">
					<u--input v-model="state.form.company" placeholder="请输入您的公司"></u--input>
				</u-form-item>
			</u--form>
		</u-modal>
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue';
	import { onReady } from '@dcloudio/uni-app'
	import { isPhone } from '@/utils/publicFuns.js'
	import { useUserinfo } from '@/store/userinfo.js'
	import { storeToRefs } from 'pinia'
	import request from '@/utils/request.js'
	const Userinfo = useUserinfo()
	const { userinfo } = storeToRefs(Userinfo)
	const checkPhone = (rule,value,callback) => {
		return isPhone(value)
	}
	const state = reactive({
		show: false,
		form: {
			head: "",
			mobile: "",
			nickname: "",
			company: "",
			realName: ""
		},
		rules: {
			realName: [{required: true,message: '请输入姓名'}],
			mobile: [{required: true,message: '请输入手机号'},{validator: checkPhone,message: '手机号格式错误'}],
			company: [{required: true,message: '请输入公司名称'}],
		}
	})
	const formRef = ref(null)
	const confirm = () => {
		formRef.value.validate().then(res => {
			request({
				url:'api/personal/userMsgEdit',
				method:'post',
				needLogin: true,
				data: state.form
			}).then(res => {
				getApp().getUserinfo()
				jump()
			}).catch(err => {
				jump()
			})
		})
	}
	const cancel = () => {
		jump()
	}
	const jump = () => {
		state.show = false;
		uni.navigateTo({
			url: '/pages/class/searchProductByPicture'
		})
	}
	const getPhoneNumber = () => {
		
	}
	const checkUserinfo = () => {
		if (userinfo.value.mobile) {
			jump()
		} else {
			for(let key in state.form) {
				state.form[key] = userinfo.value[key]
			}
			state.show = true
		}
	}
	// #ifdef MP-WEIXIN
		onReady(() => {
			formRef.value.setRules(state.rules)
		})
	// #endif
	defineExpose({
		checkUserinfo
	})
</script>

<style lang="scss">

</style>